<template>
  <div style="height:932px;width: 100%;padding: 10px;">
    <div class="all box-G0">
      <div id="grid-G0"></div>
    </div>
    <div class="all box-G1">
      <div id="grid-G1"></div>
    </div>
    <div class="all box-G2">
      <div id="grid-G5" ></div>
      <div id="grid-G2" >
       <a-tabs
      :default-active-key="defaultselectjcdbh"
      tab-position="top"
      @change="tabcallback"
    >
      <a-tab-pane v-for="item in qyjcdArr" :key="item.jcdbh" :tab="item.qypwk">
      </a-tab-pane>
      </a-tabs>
      <div id="realst" style="height:240px;"></div>
      </div>
    </div>
    <div class="all box-G3">
      <div id="grid-G3" >
        <div
          style="width: 735px;position: absolute;padding: 5px;z-index: 2;background-color:rgba(18, 37, 79, 0.45);;text-align: center;border-radius: 8px;color: #ffffff;font-size: 16px;"
        >乌海市排放企业分布图
        
        </div>
        <div
          style="position: absolute;padding: 5px;z-index: 3;background-color:rgba(18, 37, 79, 0.45);border-radius: 8px;color: #ffffff;font-size: 16px;margin-left:35px;"
        >
        <a-auto-complete
    v-model="qyvalue"
    :options="qyOptions"
    style="width: 200px"
    placeholder="查找企业"
    @search="handleQySearch"
    @select="onSelect"
    :filter-option="filterOption"
  >
  </a-auto-complete>
        </div>
      </div>
    </div>
    <div class="all box-G4">
      <div id="grid-G4"></div>
    </div>
    <div class="all box-G5">
      <div id="grid-G51" ></div>
    </div>
  </div>
</template>
<script>
import * as mapOper from '../../scripts/mapOper.js';
import config from '../../config/config';
import commonOper from '../../scripts/commonOper';
var _ = require('lodash');
export default {
  name: 'Pfjcfx',
  data() {
    return {
      loaclQyData:[],
      localQyStaticData:[],
      lacolTopQypf:[],

      qyOptions:[
        {value:'123'}
      ],
      localpfaqi:[],
      defaultselectjcdbh:'',
      qyjcdArr:[],
      qyvalue:'',
      r1map: null,
      G0Chart: null,
      g0option: {
        timeline: {
          data: [],
          axisType: 'category',
          autoPlay: true,
          playInterval: 6000,
          left: '10%',
          right: '10%',
          bottom: '1%',
          width: '80%',
          label: {
            normal: {
              textStyle: {
                color: '#ddd'
              }
            },
            emphasis: {
              textStyle: {
                color: '#fff'
              }
            }
          },
          symbolSize: 10,
          lineStyle: {
            color: '#555'
          },
          checkpointStyle: {
            borderColor: '#777',
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: true,
            showPrevBtn: true,
            normal: {
              color: '#666',
              borderColor: '#666'
            },
            emphasis: {
              color: '#aaa',
              borderColor: '#aaa'
            }
          }
        },
        baseOption: {
          animation: true,
          animationDuration: 1000,
          animationEasing: 'cubicInOut',
          animationDurationUpdate: 1000,
          animationEasingUpdate: 'cubicInOut',
          grid: {
            left: '3%',
            right: '4%',
            containLabel: true,
            bottom: '15%'
          },
          tooltip: {
            trigger: 'axis', // hover触发器
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
              shadowStyle: {
                color: 'rgba(150,150,150,0.1)' //hover颜色
              }
            }
          }
        },
        options: []
      },
      G1Chart:null,
      gridG1Option: {
        backgroundColor: '#00000046',
        title: {
          text: '监测点排放浓度预警',
          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          // icon: 'diamond',
          itemGap: 13,
          data: ['烟尘浓度', '二氧化硫浓度', '氮氧化物浓度'],
          x: 'center',
          y: '40px',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          left: '2%',
          right: '10%',
          bottom: '8%',
          top: '20%',
          containLabel: true
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: '8%',
            start: 90,
            end: 100,
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },

            axisLabel: {
              margin: 10,
              textStyle: {
                color: 'rgba(255,255,255)',
                fontSize: '12'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.1)'
              }
            }
          }
        ],
        series: [
          {
            name: '烟尘浓度',
            type: 'line',
            smooth: true,
            markLine: {
              //最大值和最小值
              data: [
                {
                  name: '烟尘阈值30',
                  yAxis: 54,
                  label: {
                    show: 'true',
                    position: 'end',
                    formatter: '烟尘阈值30'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#fccb05'
                    }
                  }
                }
              ]
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: '#fccb05'
                // borderColor: 'blue', //拐点边框颜色
              }
            },
            data: [
            ]
          },
          {
            name: '二氧化硫浓度',
            type: 'line',
            smooth: true,
            markLine: {
              //最大值和最小值
              data: [
                {
                  name: '二氧化硫阈值50',
                  yAxis: 30,
                  label: {
                    show: 'true',
                    position: 'end',
                    formatter: '二氧化硫阈值50'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#8bd46e'
                    }
                  }
                }
              ]
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: '#8bd46e'
                // borderColor: 'blue', //拐点边框颜色
              }
            },
            data: [
            ]
          },
          {
            name: '氮氧化物浓度',
            type: 'line',
            smooth: true,
            markLine: {
              //最大值和最小值
              data: [
                {
                  name: '氮氧化物阈值500',
                  yAxis: 10,
                  label: {
                    show: 'true',
                    position: 'end',
                    formatter: '氮氧化物阈值500'
                  },
                  lineStyle: {
                    normal: {
                      width: 2,
                      color: '#248ff7'
                    }
                  }
                }
              ]
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            symbol: 'circle',
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: '#248ff7'
                // borderColor: 'blue', //拐点边框颜色
              }
            },
            data: [
            ]
          }
        ]
      },
      G4Chart: null,
      label : {
        normal: {
          textStyle: {
            color: '#ffffff',
            insideColor: '#ffffff',
            fontSize: 13
          }
        }
      },
      g4option:{
        title: [
          {
            text: '企业排放占比',
            subtext: '2018年5月31日',
            x: 'center',
            y: '20px',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: 'white'
            }
          }
        ],
        graphic: [
          {
            type: 'group',
            left: '17%',
            top: '80%',
            children: [{
              type: 'text',
              z: 10,
              left: 'center',
              top: 'top',
              style: {
                fill: '#fccb05',
                text: '烟尘',
                font: '16px Microsoft YaHei'
              }
            }]
          },
          {
            type: 'group',
            left: '44%',
            top: '80%',
            children: [{
              type: 'text',
              z: 100,
              left: 'center',
              top: 'top',
              style: {
                fill: '#8bd46e',
                text: '二氧化硫',
                font: '16px Microsoft YaHei'
              }
            }]
          },
          {
            type: 'group',
            left: '74%',
            top: '80%',
            children: [{
              type: 'text',
              z: 100,
              left: 'center',
              top: 'top',
              style: {
                fill: '#248ff7',
                text: '氮氧化物',
                font: '16px Microsoft YaHei'
              }
            }]
          }
        ],
        series: [
          {type: 'liquidFill',

            radius: '50%',
            // 水球颜色
            color: ['#fccb05'],
            center: ['20%', '50%'],
            label: {
              normal: {
                textStyle: {
                  color: '#28b2b6',
                  insideColor: '#28b2b6',
                  fontSize: 20,
                },
              },
            },
            backgroundStyle: {
              color: 'transparent', //图表的背景颜色
              //borderWidth: '10',//图表的边框宽度
              //borderColor: '#000',//图表的边框颜色
              itemStyle: {
                shadowBlur: 20, //设置无用
                shadowColor: '#072F3A', //设置无用
                opacity: 1, //设置无用
              },
            },
            itemStyle: {
              opacity: 0.5, //波浪的透明度
              shadowBlur: 10, //波浪的阴影范围
              // shadowColor: "#072F3A", //阴影颜色
            },
            outline: {
              show: true, //是否显示轮廓 布尔值
              borderDistance: 0, //外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: '#fccb05', //边框的颜色
                borderWidth: 2, //边框的宽度
                shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //鼠标经过波浪颜色的透明度
              },
            },


            data: [0.6, 0.6244, 0.5804, 0.5604, 0.5514],
            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: '50%', //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            
            direction: 'left', //波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: 'linear', //初始动画
            animationEasingUpdate: 'quarticInOut', //数据更新的动画效果
            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300, //数据更新动画的时长
          },
          {type: 'liquidFill',

            radius: '50%',
            // 水球颜色
            color: ['#8bd46e'],
            center: ['50%', '50%'],
            label: {
              normal: {
                textStyle: {
                  color: '#28b2b6',
                  insideColor: '#28b2b6',
                  fontSize: 20,
                },
              },
            },
            backgroundStyle: {
              color: 'transparent', //图表的背景颜色
              //borderWidth: '10',//图表的边框宽度
              //borderColor: '#000',//图表的边框颜色
              itemStyle: {
                shadowBlur: 20, //设置无用
                shadowColor: '#072F3A', //设置无用
                opacity: 1, //设置无用
              },
            },
            itemStyle: {
              opacity: 0.5, //波浪的透明度
              shadowBlur: 10, //波浪的阴影范围
              // shadowColor: "#072F3A", //阴影颜色
            },
            outline: {
              show: true, //是否显示轮廓 布尔值
              borderDistance: 0, //外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: '#8bd46e', //边框的颜色
                borderWidth: 2, //边框的宽度
                shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //鼠标经过波浪颜色的透明度
              },
            },


            data: [0.6, 0.6244, 0.5804, 0.5604, 0.5514],
            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: '50%', //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            
            direction: 'left', //波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: 'linear', //初始动画
            animationEasingUpdate: 'quarticInOut', //数据更新的动画效果
            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300, //数据更新动画的时长
          },
          {type: 'liquidFill',
            radius: '50%',
            // 水球颜色
            color: ['#248ff7'],
            center: ['80%', '50%'],
            label: {
              normal: {
                textStyle: {
                  color: '#28b2b6',
                  insideColor: '#28b2b6',
                  fontSize: 20,
                },
              },
            },
            backgroundStyle: {
              color: 'transparent', //图表的背景颜色
              //borderWidth: '10',//图表的边框宽度
              //borderColor: '#000',//图表的边框颜色
              itemStyle: {
                shadowBlur: 20, //设置无用
                shadowColor: '#072F3A', //设置无用
                opacity: 1, //设置无用
              },
            },
            itemStyle: {
              opacity: 0.5, //波浪的透明度
              shadowBlur: 10, //波浪的阴影范围
              // shadowColor: "#072F3A", //阴影颜色
            },
            outline: {
              show: true, //是否显示轮廓 布尔值
              borderDistance: 0, //外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: '#248ff7', //边框的颜色
                borderWidth: 2, //边框的宽度
                shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#000' //外部轮廓的阴影颜色
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1, //鼠标经过波浪颜色的透明度
              },
            },


            data: [0.6, 0.6244, 0.5804, 0.5604, 0.5514],
            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: '50%', //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            
            direction: 'left', //波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: 'linear', //初始动画
            animationEasingUpdate: 'quarticInOut', //数据更新的动画效果
            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300, //数据更新动画的时长
          },
        ]

      },
      G5Chart: null,
      g5option: {
        //backgroundColor:'#323a5e',
        title: {
          top: '0',
          left: 'center',
          text: '2号废气排口监控点年度排放统计',
          subtext:'月度排放统计',
          textStyle: {
            align: 'center',
            color: '#FFFFFF'
            //fontSize: 16
          },
          subtextStyle:{
            align: 'center',
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '8%',
          top: '20%',
          containLabel: true
        },
        legend: {
          data: ['烟尘', '二氧化硫', '氮氧化物'],
          right: 10,
          top: 28,
          textStyle: {
            color: '#fff'
          },
          itemWidth: 12,
          itemHeight: 10
          // itemGap: 35
        },
        xAxis: {
          type: 'category',
          data: [
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
            '2018',
            '2019'
          ],
          axisLine: {
            lineStyle: {
              color: 'white'
            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          }
        },

        yAxis: {
          type: 'value',
          //max:'1200',
          name: '千克',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: '8%',
            start: 85,
            end: 100,
            handleIcon:
              'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
              color: '#d3dee5'
            },
            textStyle: {
              color: '#fff'
            },
            borderColor: '#90979c'
          },
          {
            type: 'inside',
            show: true,
            height: 15,
            start: 1,
            end: 35
          }
        ],
        series: [
          {
            name: '烟尘',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fccb05'
                  },
                  {
                    offset: 1,
                    color: '#f5804d'
                  }
                ]),
                barBorderRadius: 12
              }
            },
            data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
          },
          {
            name: '二氧化硫',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#8bd46e'
                  },
                  {
                    offset: 1,
                    color: '#09bcb7'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
          },
          {
            name: '氮氧化物',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#248ff7'
                  },
                  {
                    offset: 1,
                    color: '#6851f1'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
          }
        ]
      },
      G7Chart:null,
      g7option:{
            
        //backgroundColor: '#043491',
        title: {
          top: '0',
          left: 'center',
          subtext:'每日排放统计',
          subtextStyle:{
            align: 'center',
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          right: 10,
          top: 28,
          textStyle: {
            color: '#f2f2f2',
            fontSize: 12
          },
          icon: 'circle',
          data: ['烟尘排量', '二氧化硫排量', '氮氧化物排量']
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 12,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 90,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        grid: {
          left: '2%',
          right: '4%',
          bottom: '8%',
          top: '23%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [],
            name: '时间',
            nameTextStyle: {
              color: '#d4ffff'
            },
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#FFF',
                fontSize: 12
              }
              //interval:0,
              //rotate:30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '千克',
            nameTextStyle: {
              color: '#d4ffff'
            },
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#0B4CA9'
              }
            },
            axisLabel: {
              color: '#d4ffff',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            name: '烟尘排量',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#fccb05'
              }
            },
            data: []
          },
          {
            name: '二氧化硫排量',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#8bd46e'
              }
            },
            data: []
          },
          {
            name: '氮氧化物排量',
            type: 'line',
            yAxisIndex: 0,
            symbolSize: 12,
            itemStyle: {
              normal: {
                color: '#248ff7'
              }
            },
            data: []
          }
        ]
      },
      G51Chart: null,
      g51ChartOption: {
        title: {
          text: '连续排放与空气质量相关性分析',
          x: 'center',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          top: '25%',
          bottom: '10%',
          right:'5%',
          left:'10%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            height: 20,
            left: '10%',
            right: '10%',
            bottom: '2%',
            start: 90,
            end: 100,
            textStyle: {
              color: '#d4ffff',
              fontSize: 11
            }
          },
          {
            type: 'inside'
          }
        ],
        calculable: true,
        legend: {
          data: ['空气质量指数', '烟尘排量', '二氧化硫排量', '氮氧化物排量'],
          top: '15%',
          textStyle: {
            color: '#ffffff'
          }
        },
        xAxis: {
          data: [],
          axisLine: {
            show: false //隐藏X轴轴线
          },
          axisTick: {
            show: false //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac' //X轴文字颜色
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '总排放(Kg)',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            splitLine: {
              show: false
            },

            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value}Kg',
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            name: '空气质量指数',
            nameTextStyle: {
              color: '#ebf8ac'
            },
            position: 'right',

            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              formatter: '{value} ', //右侧Y轴文字显示
              textStyle: {
                color: '#ebf8ac'
              }
            }
          },
          {
            type: 'value',
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
              }
            }
          }
        ],
        series: [
          {
            name: '空气质量指数',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: '#cc0033'
            },
            lineStyle: {
              color: '#cc0033'
            },
            areaStyle: {
              color: 'rgba(5,140,255, 0.2)'
            },
            data: []
          },
          {
            name: '烟尘排量',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#fccb05'
                  },
                  {
                    offset: 1,
                    color: '#f5804d'
                  }
                ]),
                barBorderRadius: 12
              }
            },
            data: []
          },
          {
            name: '二氧化硫排量',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#8bd46e'
                  },
                  {
                    offset: 1,
                    color: '#09bcb7'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: []
          },
          {
            name: '氮氧化物排量',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#248ff7'
                  },
                  {
                    offset: 1,
                    color: '#6851f1'
                  }
                ]),
                barBorderRadius: 11
              }
            },
            data: []
          }
        ]
      },
    };
  },
  mounted() {

    this.r1map = mapOper.initBlankMap('grid-G3');
    this.r1map.getView().setCenter([36397837.6737836, 4366555.38204145]);
    this.r1map.getView().setZoom(3);
    // var container = document.getElementById('biaozhu');
    // let markerSetting = {
    //   map: this.r1map,
    //   element: container
    // };
    // mapOper.addMarker(markerSetting);
    // this.initPFKData();
    this.initJcdData();
    this.$nextTick(() => {
      //this.initMap();
      this.initG0Charts();
      this.initG1Charts();

      this.initG4Charts();
      this.initG5Charts();
      this.initG7Charts();
      this.initG51Charts();
      //this.updataChartsData('QY_0020');
      this.getChart1Data();
      this.getChart51Data();
    });
  },
  methods:{
    initG0Charts: function() {
      let that = this;
      var voltageLevel = ['烟尘', '二氧化硫', '氮氧化物'];
      that.g0option.timeline.data = voltageLevel;
      let chartDiv = document.getElementById('grid-G0');
      that.G0Chart = that.$echarts.init(chartDiv);
      that.G0Chart.setOption(that.g0option);
      window.onresize = that.G0Chart;
    },
    initG1Charts:function(){
      let that = this;
     
      let chartDiv = document.getElementById('grid-G1');
      that.G1Chart = that.$echarts.init(chartDiv);
      that.G1Chart.setOption(that.gridG1Option);
      window.onresize = that.G1Chart;
    },
    initG4Charts: function() {
      let chartDiv = document.getElementById('grid-G4');
      this.G4Chart = this.$echarts.init(chartDiv);

      this.G4Chart.setOption(this.g4option);
      window.onresize = this.G4Chart;
    },
    initG5Charts: function() {
      let chartDiv = document.getElementById('grid-G5');
      this.G5Chart = this.$echarts.init(chartDiv);
      this.G5Chart.setOption(this.g5option);
      window.onresize = this.G5Chart;
      var app = {
        currentIndex: -1
      };
      setInterval(() => {
        var dataLen = this.g5option.series[0].data.length;

        // 取消之前高亮的图形
        this.G5Chart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        //console.log(app.currentIndex);
        // 高亮当前图形
        this.G5Chart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
        // 显示 tooltip
        this.G5Chart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: app.currentIndex
        });
      }, 3000);
    },
    initG7Charts: function() {
      let that = this;
      
      let chartDiv = document.getElementById('realst');
      that.G7Chart = that.$echarts.init(chartDiv);
      that.G7Chart.setOption(that.g7option);
      window.onresize = that.G7Chart;
    },
    initG51Charts(){
      let that = this;
      
      let chartDiv = document.getElementById('grid-G51');
      that.G51Chart = that.$echarts.init(chartDiv);
      that.G51Chart.setOption(that.g51ChartOption);
      window.onresize = that.G51Chart;
    },
    initJcdData() {
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/qyjcd/getAllJcd',
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            that.loaclQyData=response.data.data;
            var grarr=_.uniqBy(response.data.data, 'qyname');
            let overlayerdata={
              type: 'FeatureCollection',
              name: 'qy_jcd_gk36',
              features:[]
            };
            var qynamearr=[];
            _.forEach(grarr, function(value) {
              var tempfeature={
                type: 'Feature',
                properties:{
                  qyname:value.qyname,
                  qybh:value.qybh
                },
                geometry:JSON.parse(value.geom)
              };
              overlayerdata.features.push(tempfeature);
              qynamearr.push({value:value.qyname});
            });
            that.qyOptions=qynamearr;

            //--更新企业统计图表----
            that.updateQyChart('QY_0020');
            
            //let style = mapOper.getGeoJsonStyle('qyjcd');
            //点样式,图片
            var pointStyleIconParams = {
              geotype: 'PointIcon',
              icon: {
                //anchor: [0.5, 1],
                src: '',
                //'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3794829799,3479646937&fm=26&gp=0.jpg'
              },
              text:{
                font:'12px Calibri,sans-serif',
                offsetY:0,
                fill:{
                  color:'#ffffff00',
                },
                Stroke:{
                  color:'#ffffff',
                  width:0
                }
              }
            };
            var pointStyleIcon = mapOper.createStyle(pointStyleIconParams);

            let wfsParams = {
              map: that.r1map,
              jsonData: overlayerdata,
              style: pointStyleIcon,
              //   styleFunc: function(feature) {
              //     pointStyleIcon.getText().setText(feature.get('qyname'));
              //     return pointStyleIcon;
              //   },
              selectFunc: function(e) {
                if (e.target.getFeatures().getLength() == 1) {
                  let feature = e.target.getFeatures().item(0);
                  let qybh = feature.get('qybh');
                  //console.log(qybh);
                  //--更新企业统计图表----
                  that.updateQyChart(qybh);
                } else {
                  console.log('feature');
                }
              }
            };
            that.r1map = mapOper.loadWFSLayer(wfsParams);
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    getChart1Data() {
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/qyjcdrecord/getTop5Yqpfl',
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            let chart1data = [];
            
            _.forEach(response.data.data, function(value) {
              chart1data.push({
                qybh: value.qybh,
                qyname: value.qyname,
                ycpl: Number(value.ycpl),
                nopl: Number(value.nopl),
                sotwopl: Number(value.sotwopl)
              });
            });
            that.lacolTopQypf=chart1data;
            let yclist = _.orderBy(chart1data, ['ycpl'], ['desc']);
            let solist = _.orderBy(chart1data, ['sotwopl'], ['desc']);
            let nolist = _.orderBy(chart1data, ['nopl'], ['desc']);
            //console.log(yclist);
            //let yearlistdata = this.gridL1Option.timeline.data;
            //烟尘
            this.g0option.options.push({
              title: {
                text: '烟尘实时排放Top5',
                subtext: '单位：千克',
                x: 'center',
                textStyle: {
                  color: '#ffffff'
                }
              },
              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: '#aaa'
                  }
                }
              },
              yAxis: {
                type: 'category',
                data: [
                  yclist[4].qyname,
                  yclist[3].qyname,
                  yclist[2].qyname,
                  yclist[1].qyname,
                  yclist[0].qyname
                ],
                axisLine: {
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisLabel: {
                  interval: 0,
                  formatter: function(params) {
                    var newParamsName = '';
                    var paramsNameNumber = params.length;
                    var provideNumber = 10;
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                      for (var p = 0; p < rowNumber; p++) {
                        var tempStr = '';
                        var start = p * provideNumber;
                        var end = start + provideNumber;
                        if (p == rowNumber - 1) {
                          tempStr = params.substring(start, paramsNameNumber);
                        } else {
                          tempStr = params.substring(start, end) + '\n';
                        }
                        newParamsName += tempStr;
                      }
                    } else {
                      newParamsName = params;
                    }
                    return newParamsName;
                  }
                }
              },
              series: [
                {
                  name: '烟尘',
                  type: 'bar',
                  // itemStyle: {
                  //   normal: {
                  //     color: '#91CA8C',
                  //     shadowBlur: 5,
                  //     shadowColor: '#91CA8C'
                  //   }
                  // },
                  itemStyle: {
                    normal: {
                      color: function(params) {
                        var colorList = [
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#f0515e'
                              },
                              {
                                offset: 1,
                                color: '#ef8554'
                              }
                            ]
                          },
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#3c38e4'
                              },
                              {
                                offset: 1,
                                color: '#24a5cd'
                              }
                            ]
                          }
                        ];
                        if (params.dataIndex < 3) {
                          return colorList[1];
                        } else {
                          return colorList[0];
                        }
                      },
                      barBorderRadius: [0, 15, 15, 0]
                    }
                  },
                  label: {
                    normal: {
                      show: true,
                      textBorderColor: '#333',
                      textBorderWidth: 2
                    }
                  },
                  data: [
                    yclist[4].ycpl.toFixed(2),
                    yclist[3].ycpl.toFixed(2),
                    yclist[2].ycpl.toFixed(2),
                    yclist[1].ycpl.toFixed(2),
                    yclist[0].ycpl.toFixed(2)
                  ]
                }
              ]
            });
            this.g0option.options.push({
              title: {
                text: '二氧化硫实时排放Top5',
                subtext: '单位：千克',
                x: 'center',
                textStyle: {
                  color: '#ffffff'
                }
              },

              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: '#aaa'
                  }
                }
              },
              yAxis: {
                type: 'category',
                data: [
                  solist[4].qyname,
                  solist[3].qyname,
                  solist[2].qyname,
                  solist[1].qyname,
                  solist[0].qyname
                ],
                axisLine: {
                  lineStyle: {
                    color: '#ddd'
                  }
                }
              },
              series: [
                {
                  name: '二氧化硫',
                  type: 'bar',
                  // itemStyle: {
                  //   normal: {
                  //     color: '#9D96F5',
                  //     shadowBlur: 5,
                  //     shadowColor: '#9D96F5'
                  //   }
                  // },
                  itemStyle: {
                    normal: {
                      color: function(params) {
                        var colorList = [
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#f0515e'
                              },
                              {
                                offset: 1,
                                color: '#ef8554'
                              }
                            ]
                          },
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#3c38e4'
                              },
                              {
                                offset: 1,
                                color: '#24a5cd'
                              }
                            ]
                          }
                        ];
                        if (params.dataIndex < 3) {
                          return colorList[1];
                        } else {
                          return colorList[0];
                        }
                      },
                      barBorderRadius: [0, 15, 15, 0]
                    }
                  },
                  data: [
                    solist[4].sotwopl.toFixed(2),
                    solist[3].sotwopl.toFixed(2),
                    solist[2].sotwopl.toFixed(2),
                    solist[1].sotwopl.toFixed(2),
                    solist[0].sotwopl.toFixed(2)
                  ]
                }
              ]
            });
            this.g0option.options.push({
              title: {
                text: '氮氧化物实时排放Top5',
                subtext: '单位：千克',
                x: 'center',
                textStyle: {
                  color: '#ffffff'
                }
              },

              xAxis: {
                type: 'value',
                scale: true,
                position: 'top',
                min: 0,
                boundaryGap: false,
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 2,
                  textStyle: {
                    color: '#aaa'
                  }
                }
              },
              yAxis: {
                type: 'category',
                data: [
                  nolist[4].qyname,
                  nolist[3].qyname,
                  nolist[2].qyname,
                  nolist[1].qyname,
                  nolist[0].qyname
                ],
                nameGap: 16,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisTick: {
                  show: false,
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                axisLabel: {
                  interval: 0,
                  textStyle: {
                    color: '#ddd'
                  }
                }
              },
              series: [
                {
                  name: '氮氧化物',
                  type: 'bar',
                  // itemStyle: {
                  //   normal: {
                  //     color: '#7289AB',
                  //     shadowBlur: 5,
                  //     shadowColor: '#7289AB'
                  //   }
                  // },
                  itemStyle: {
                    normal: {
                      color: function(params) {
                        var colorList = [
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#f0515e'
                              },
                              {
                                offset: 1,
                                color: '#ef8554'
                              }
                            ]
                          },
                          {
                            colorStops: [
                              {
                                offset: 0,
                                color: '#3c38e4'
                              },
                              {
                                offset: 1,
                                color: '#24a5cd'
                              }
                            ]
                          }
                        ];
                        if (params.dataIndex < 3) {
                          return colorList[1];
                        } else {
                          return colorList[0];
                        }
                      },
                      barBorderRadius: [0, 15, 15, 0]
                    }
                  },
                  data: [
                    nolist[4].nopl.toFixed(2),
                    nolist[3].nopl.toFixed(2),
                    nolist[2].nopl.toFixed(2),
                    nolist[1].nopl.toFixed(2),
                    nolist[0].nopl.toFixed(2)
                  ]
                }
              ]
            });
            this.G0Chart.setOption(this.g0option);

            //更新水滴图
            this.updataChart4('QY_0020');
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    getChart51Data(){
      let that = this;
      let param = {
        this: that,
        url: config.webapiUrl + '/datastatic/getPfAndAqi?timescale=3',
        successFunc: response => {
          if (response.status === 200 && response.data.data) {
            //console.log(response.data.data);
            let sortedarr = _.sortBy(response.data.data, ['datatime']);
            that.localpfaqi=sortedarr;
            let xData = [];
            let seriesData = [];
            let ycplarr=[];
            let soplarr=[];
            let noplarr=[];
            _.forEach(sortedarr, function(item) {
              if(item.aqi>100){
                var unixTimestamp = new Date(item.datatime);
                var syear = unixTimestamp.getFullYear();
                var month = unixTimestamp.getMonth() + 1;
                var day = unixTimestamp.getDate();
                xData.push(syear + '-' + month + '-' + day);
                seriesData.push(item.aqi);
                ycplarr.push(item.ycpl.toFixed(2));
                soplarr.push(item.sotwopl.toFixed(2));
                noplarr.push(item.nopl.toFixed(2));
              }
              
            });
            that.g51ChartOption.xAxis.data = xData;
            that.g51ChartOption.series[0].data = seriesData;
            that.g51ChartOption.series[1].data = ycplarr;
            that.g51ChartOption.series[2].data = soplarr;
            that.g51ChartOption.series[3].data = noplarr;
            that.G51Chart.setOption(that.g51ChartOption);
            window.onresize = that.G51Chart;
          }
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };

      commonOper.HttpGet(param);
    },
    //更新企业的统计图表
    updateQyChart(qybh){
      let that=this;
      var tempjcdarr=[];
      var qyname='';
      _.forEach(that.loaclQyData, function(value) {
        if(value.qybh==qybh){
          tempjcdarr.push(value);
          qyname=value.qyname;
        }
      });
      that.qyjcdArr=tempjcdarr;
      that.defaultselectjcdbh=tempjcdarr[0].jcdbh;

      that.updataChart4(qybh);
      //查询数据
      var year=2018;
      var month=5;
      var day=31;
      let param = {
        this: that,
        url: config.webapiUrl + '/qyjcdrecord/queryStaticQyAndJcdPfInEveryDay?qybh='+qybh+'&year='+year+'&month='+month+'&day='+day,
        successFunc: response => {
          //console.log(response.data.data);
          that.localQyStaticData=response.data.data;
          // var qyzpf=that.localQyStaticData.qyTotalPfInOneDay;

          var qydaypf=that.localQyStaticData.qyTotalPfInEveryDay;
          //更新图表2数据，浓度监测
          //更新图表4数据，水滴图，企业排放占比
          //更新图表5数据，排放口年度统计
          var monthlist=[];
          var monthdata=[];
          _.forEach(qydaypf, function(value) {
            monthlist.push(value.jcyear + '年'+value.jcmoonth + '月');
            monthdata.push({rq:value.jcyear + '年'+value.jcmoonth + '月',nopl:value.nopl,sopl:value.sotwopl,ycpl:value.ycpl});
          });
          let group5data = _.groupBy(monthdata, function(o) {
            return o.rq;
          });
          that.g5option.title.text=qyname;
          let uniqyear = _.uniq(monthlist);
          
          let ycplarr = [];
          let soplarr = [];
          let noplarr = [];
          _.forEach(uniqyear, function(value) {
            let sumycpl = _.sumBy(group5data[value], function(o) {
              return o.ycpl;
            });
            ycplarr.push(sumycpl.toFixed(2));
            let sumsopl = _.sumBy(group5data[value], function(o) {
              return o.sopl;
            });
            soplarr.push(sumsopl.toFixed(2));
            let sumnopl = _.sumBy(group5data[value], function(o) {
              return o.nopl;
            });
            noplarr.push(sumnopl.toFixed(2));
          });

          that.g5option.xAxis.data = uniqyear;

          that.g5option.series[0].data = ycplarr;
          that.g5option.series[1].data = soplarr;
          that.g5option.series[2].data = noplarr;

          that.G5Chart.setOption(that.g5option);
          //更新图表7数据，排放口历史统计--默认排放监测点
          that.updateChart7(that.defaultselectjcdbh);
          
        },
        failFunc: response => {
          let params = {
            this: that,
            title: '提示',
            message: '网络连接错误！' + response,
            type: 'warning'
          };
          commonOper.Notification(params);
        }
      };
      commonOper.HttpGet(param);
      
    },
    updataChart4(qybh){
      var currentycpl=0;
      var currentsopl=0;
      var currentnopl=0;
      var totalycpl=1;
      var totalsopl=1;
      var totalnopl=1;
      _.forEach(this.lacolTopQypf, function(value) {
        if(value.qybh==qybh){
          currentycpl=value.ycpl;
          currentsopl=value.sotwopl;
          currentnopl=value.nopl;
        }
        totalycpl+=value.ycpl;
        totalsopl+=value.sotwopl;
        totalnopl+=value.nopl;
      });
      var preyc=(currentycpl/totalycpl).toFixed(2);
      var preso=(currentsopl/totalsopl).toFixed(2);
      var preno=(currentnopl/totalnopl).toFixed(2);
      this.g4option.series[0].data=[preyc,preyc+0.0244,preyc-0.0196,preyc-0.0396,preyc-0.0496];
      this.g4option.series[1].data=[preso,preso+0.0244,preso-0.0196,preso-0.0396,preso-0.0496];
      this.g4option.series[2].data=[preno,preno+0.0244,preno-0.0196,preno-0.0396,preno-0.0496];
      this.G4Chart.setOption(this.g4option);
    },
    updateChart7(jcdbh){
      let that=this;
      var jcdpf=that.localQyStaticData.qyAllJcdPfInEveryDay;
      let xdata = [];
      let ycnd = [];
      let sond = [];
      let nond = [];
      let ycnd2 = [];
      let sond2 = [];
      let nond2 = [];
      //let g0data=[];

      let jcdarr=[];
      for(var i=0;i<jcdpf.length;i++){
        if(jcdpf[i].jcdbh==jcdbh){
          jcdarr.push(jcdpf[i]);
        }
      }
      for(var j=0;j<jcdarr.length;j++){
        ycnd.push(jcdarr[j].ycpl.toFixed(2));
        sond.push(jcdarr[j].sotwopl.toFixed(2));
             
        nond.push(jcdarr[j].nopl.toFixed(2));
        ycnd2.push(jcdarr[j].ycnd.toFixed(2));
        sond2.push(jcdarr[j].sotwond.toFixed(2));
             
        nond2.push(jcdarr[j].nond.toFixed(2));
        xdata.push(
          jcdarr[j].jcyear + '年' + jcdarr[j].jcmoonth + '月' + jcdarr[j].jcday + '日'
        );
      }
      that.g7option.xAxis[0].data = xdata;
      that.g7option.series[0].data = ycnd;
      that.g7option.series[1].data = sond;
      that.g7option.series[2].data = nond;
      that.G7Chart.setOption(that.g7option);
      window.onresize = that.G7Chart;

      that.gridG1Option.xAxis[0].data = xdata;
      that.gridG1Option.series[0].data = ycnd2;
      that.gridG1Option.series[1].data = sond2;
      that.gridG1Option.series[2].data = nond2;
      that.G1Chart.setOption(that.gridG1Option);
      window.onresize = that.G1Chart;

    },
    handleQySearch(value){
      console.log(value);
      this.qyOptions=[{value:'345'}];
      //this.qyvalue=value;
    },
    onSelect(value) {
      console.log('onSelect', value.trim());
      this.qyvalue=value.trim();
    },
    filterOption(input, option) {
      return option.value.toUpperCase().indexOf(input.toUpperCase()) >= 0;
    },
    tabcallback(key){
      this.updateChart7(key);
    },
  }

};
</script>
<style scoped>
.box-G0 {
  width: 29.5%;
  float: left;
  margin-right: 10px;
}
#grid-G0 {
  height: 380px;
}
.box-G1 {
  width: 39.5%;
  float: left;
 
}
#grid-G1 {
  height: 380px;
}
.box-G2 {
  width: 30%;
  float: right;
  margin-bottom: 10px;
}
#grid-G2 {
  padding: 5px;
  height: 330px;
}
#grid-G5 {
  padding: 5px;
  height: 310px;
}
.box-G3 {
  width: 39.5%;
  float: left;
  margin-top: 10px;
}
#grid-G3 {
  height: 580px;
}
.box-G4 {
  margin-left: 10px;
  margin-top: 10px;
  width: 29.5%;
  float: left;
 
}
#grid-G4 {
  height: 250px;
}
.box-G5 {
  width: 60%;
  float: right;
 
}
#grid-G51 {
  height: 320px;
  /* float: right; */
}
#select-left-bar {
  width: 500px;
  position: absolute;
  top: 100px;
  left: 10px;
  background: transparent;
}

</style>